<template>
  <div class="comment">
    <div id="bigpinglun" class="b1">
      <!-- <div id='xintouxiang'><img :src="getPic(sharecom[0].headPic)"> </div> -->
      <textarea
        v-model="newcomment "
        placeholder="请输入评论内容"
        id="pl"
        class="pl1"
        style="  resize:none;border:1px solid gray;border-radius: 5px ; "
      ></textarea>
      <div id="fabiao" class="fabiao1">
         <!-- <el-button size="small">小型按钮</el-button> -->
        <button value="发表" id="fasong" class="fasong1 fa fa-location-arrow"  @click="fabiao()" >发表评论</button>
      </div>

      <div id="pinglunqu">
        <!-- <span id='xiafangpinglun'></span>
        <span id='wo'></span>-->
        <ul>
          <li v-for="(i,key) in sharecom" :key="key" id="xiafangpinglunqu" class="x1">
            <div id="yitiaopinglun">
              <div id="youbianpinglun">
                <div id="touxiang">
                  <img :src="getPic(sharecom[key].headPic)" />
                </div>
                <div id="comment" class="c1">
                  <span>{{sharecom[key].userName}}:</span>
                  <span id="xiafangpinglun" class="xf">{{sharecom[key].commentContent}}</span>
                  <div id="sj" class="sj1">
                    <span id="sj1" class="sj1">
                      {{renderTime(sharecom[key].commentTime)}}
                      <a
                        class="rma"
                        id="rma"
                        href="###"
                        v-show="iscomment[key]"
                        @click="delcomment(key)"
                      >删除</a>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <div id="nocomment" v-show="isnocomment">
            <p>暂时还没有人来评论，快来抢个沙发吧！</p>
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import jwt_decode from "jwt-decode";
export default {
  data() {
    return {
      name: "comment",
      // sharecom:[],
      newcomment: "",
      isnocomment: false,
      iscomment: [],
      newcomment: "",
      // sharecom:[]
    };
  },
  props: ["sharecom", "upmenuId"],
  methods: {
    //获取图片
    getPic(pic) {
      if (pic == "userimg.jpg") {
        return require("../assets/images/" + pic);
      } else {
        return require("../../../../Eatproj/EAT/public/upload/" + pic);
      }
    },
    renderTime(date) {
      var dateee = new Date(date).toJSON();
      return new Date(+new Date(dateee) + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, " ")
        .replace(/\.[\d]{3}Z/, "");
    },
    fabiao() {
      console.log(this.newcomment);
      // console.log('传过来带key的sharecom',this.sharecom[key])
      // console.log('传没传过来sharecom数组',this.sharecom)
      if (this.newcomment == "") {
        alert("评论不能为空哦！");
      } else {
        this.$axios
          .post("http://localhost:3000/chat/upComment", {
            commentContent: this.newcomment,
            typeId: 2,
            commentType: this.upmenuId
          })
          .then(res => {
            console.log("查询结果：", res.data.data);
            console.log("查询insertId",res.data.data.insertId)
            var phone = jwt_decode(localStorage.getItem("mytoken")).phone;
            
            alert("发表评论成功！");
            this.newcomment = "";
            this.$axios
              .get(
                "http://localhost:3000/chat/comment/" + 2 + "/" + this.upmenuId
              )
              .then(res => {
                var phone = jwt_decode(localStorage.getItem("mytoken")).phone;
                console.log(phone);
                // var rma = document.querySelectorAll(".rma");
                console.log("查询结果：", res.data.data);
                if (res.data.msg == "获取评论信息失败！") {
                  this.isnocomment = true;
                } else {
                  this.isnocomment = false;
                  this.sharecom = res.data.data;
                }
                for (var i = 0; i < this.sharecom.length; i++) {
              if (phone == this.sharecom[i].Phone) {
                this.iscomment[i] = true;
              } else {
                this.iscomment[i] = false;
              }
            }
              })
              .catch(err => {
                console.log("错误信息：", err);
              });
          })
          .catch(err => {
            console.log("错误信息：", err);
          });
      }
    },
    delcomment(key) {
      console.log(this.sharecom[key].commentId);
      if (confirm("你确定要删除该条评论吗？")) {
        this.$axios
          .post(
            "http://localhost:3000/chat/delComment/" +
              // this.menucomment[index].commentId
              this.sharecom[key].commentId
          )
          .then(res => {
            console.log("查询结果：", res.data.data);
            console.log("当前的评论id号", this.sharecom[key].commentId);
            this.$axios
              .get(
                "http://localhost:3000/chat/comment/" + 2 + "/" + this.upmenuId
              )
              .then(res => {
                console.log("重新更新后的commentType", this.upmenuId);
                var phone = jwt_decode(localStorage.getItem("mytoken")).phone;
                var rma = document.querySelectorAll(".rma");
                console.log("查询结果：", res.data.data);
                for (var i = 0; i < res.data.data.length; i++) {
                  if (phone == res.data.data[i].Phone) {
                    rma[i].style.display = "block";
                  }
                }
                if (res.data.msg == "获取评论信息失败！") {
                  this.isnocomment = true;
                } else {
                  this.isnocomment = false;
                  this.sharecom = res.data.data;
                }
              })
              .catch(err => {
                console.log("错误信息：", err);
              });
          })
          .catch(err => {
            console.log("错误信息：", err);
          });
      }
    }
  }
};
</script>
<style  lang='css' scoped>
#xintouxiang{
  margin-left: 50px;
  float: left;
  width: 50px;
  height: 50px;
}
#xintouxiang img{
  height: 50px;
  width: 50px;
  border:1px solid black;
}
#pinglun {
  width: 100%;
  /* justify-content: flex-end; */
  float: left;
  overflow: hidden;
}
/* 评论下的Input */
#pinglun input {
  margin-top: 5px;
  height: 30px;
  width: 100%;
}
textarea {
  display: block;
  border-color: black;
  margin: 5px auto;
  overflow: hidden;
  height: 50px;
  width: 85%;
  /* margin-left: 110px; */
  
}
#juedezan img {
  height: 20px;
  width: 20px;
  line-height: 20px;
  margin-right: 5px;
  /* margin-top: 3px; */
}
#juedezan span {
  height: 20px;
  line-height: 20px;
  /* align-items: center; */
  /* margin-top: -3px; */
  position: relative;
  top: -3px;
}
/* 发表评论下的按钮 */
#fabiao {
  margin-top: 10px;
  margin-left: 83%;
  float: left;
}
.fasong1 {
  width: 100px;
  height: 25px;
  position: relative;
  margin-left: 0;
   background-color: rgb(160, 190, 117);
   border: 1px solid rgb(160, 190, 117);
}
/* 整个评论区的li */
#ulul {
  position: relative;
}
#xiafangpinglunqu {
    width: 90%;
    position: relative;
    /* border: 1px solid red; */
    margin: 0 auto;
    font-size: 16px;
}
/* 评论区DIV */
#bigpinglun {
  /* height: 100px; */
  width: 100%;
  float: left;
  /* display: none; */
  background-color: initial;
}
#pinglunqu {
  position: relative;
  left: 50%;
  margin-left: -47.5%;
  width: 95%;
  background-color: initial;
  float: left;
  align-items: center;
  /* margin: 5 auto; */
  margin-top: 5px;
}
#yitiaopinglun {
  /* border:1px solid orange; */
  align-items: center;
  background-color: ghostwhite;
  margin-bottom: 3px;
  border-radius: 10px;
}
#youbianpinglun {
  position: relative;
  /* border:1px solid blue; */
  padding: 1px 5px 10px 50px;
  align-items: center;
}
/* 头像 */
#touxiang {
  border: 1px solid gray;
  border-radius: 25px;
  width: 50px;
  height: 50px;
  position: absolute;
  left: 3px;
}
#touxiang > img {
  border-radius: 25px;
  width: 50px;
  height: 50px;
}
/* 头像右边评论内容 */
#comment {
  margin-left: 10px;
  /* border: 1px solid yellowgreen; */
  height: 50px;
}
#sj {
  margin-top: 10px;
  /* border: 1px solid brown; */
}
.rma {
  float: right;
}
</style>
